<template>
	<view>
		<view class="waterfallFlex" :style="'height:'+leftList.length*270+'rpx'">
			<view class="demo-warter"  v-for="(item, index) in leftList" :key="index">
				<view  v-show="!item.draft" style="max-height: 300rpx;" >
					<u-lazy-load threshold="-450" border-radius="10" mode="aspectFill" :image="item.coverUrl||'http://static.bsyjk.cn/defaultImage/CD8A6D247BE544AAA7960BA2092299ED.png'" :index="index" @tap.stop="collectTap(item,index,'leftList')">
					</u-lazy-load>
				</view>
				<view  v-show="item.draft" style="max-height: 300rpx;">
					<u-lazy-load threshold="-450" border-radius="10" mode="aspectFill" :image="item.coverUrl||'http://static.bsyjk.cn/defaultImage/CD8A6D247BE544AAA7960BA2092299ED.png'" :index="index" @tap.stop="collectTap(item,index,'leftList')">
					</u-lazy-load>
				</view>
				<!-- <image v-show="!item.draft" style="width: 100%;height: 330upx;" :src="item.coverUrl||'http://static.bsyjk.cn/defaultImage/CD8A6D247BE544AAA7960BA2092299ED.png'" mode="aspectFill" @tap.stop="collectTap(item,index,'leftList')"></image>
				<image v-show="item.draft" style="width: 100%;height: 440upx;" :src="item.coverUrl||'http://static.bsyjk.cn/defaultImage/CD8A6D247BE544AAA7960BA2092299ED.png'" mode="aspectFill" ></image> -->
				<view class="draft" v-show="item.draft" @tap.stop="collectTap(item,index,'leftList')"></view>
				<view class="draftImage" v-show="item.draft" @tap.stop="collectTap(item,index,'leftList')">
					<image style="width: 42rpx;height: 34rpx;" src="http://static.bsyjk.cn/draft/17F16EB9D3764249BDFE39EBAD9C5845.png" ></image>
				本地草稿
				</view>
				<view class="demo-title ellipsis" v-show="!item.draft">{{ item.forumTitle}}</view>
				<view class="weui-flex" style="padding-top:10upx;"  v-show="!item.draft">
					<view class="weui-flex__item">
						<view class="placeholder pbllimag">
							<view class="lad-image">
								<u-lazy-load border-radius="50" height="32" img-mode="aspectFill"
									:image="item.avatarUrl">
								</u-lazy-load>
							</view>
							{{item.nickName?item.nickName:''}}
						</view>
					</view>
					<view>
						<view class="placeholder pbllimagr" @tap.stop="upvoteRecord(item,index,'leftList')">
							<view class="lad-image">
								<image :src="item.auditStatus == 0?'http://static.bsyjk.cn/l/00DEFB77227048C99ECA2910AF17F368.png':'http://static.bsyjk.cn/l/D70DD098C9F64FC6B09C6F994098004D.png'"
									style="width: 30upx;height: 30upx;" mode=""></image>
							</view>
							{{item.upvoteNum}}
						</view>
					</view>
				</view>
			</view>
			<view class="demo-warter" style="height: 0;padding: 0;" v-for="i in 2"></view>
		</view>
		<!-- 瀑布流圈子 -->
		<view v-if="leftList.length <=0" style="text-align: center;color: #9B9B9B;font-size: 30upx;">
			<view class="noDataicon">
			</view>
			暂无分享
		</view>
	</view>
</template>

<script>
	import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"
	export default {
		components: {
			uLazyLoad
		},
		props: {
			leftList:Array,
			rightList:Array,
		},
		data() {
			return {
				
			}
		},
		methods:{
			// 点赞
			upvoteRecord(item,index,type){
				console.log(item)
				if(item.auditStatus == 0){
					console.log('125删除')
					this.$cms.delete(global.apiUrls.forum+'/'+item.forumId, {}).then(res => {
						if (res.data.code == 1000) {
							uni.showToast({
								title: '删除成功',
								duration: 2000
							});
							uni.$emit('toUpdateFabulous',{
								type:type,
								index:index,
								deleteForum:true
							})
							// setTimeout(()=>{
							// 	uni.navigateBack({
							// 		delta: 1
							// 	});
							// },2000)
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});
						}
					})
				}else{
					// let fdata = {
					// 	topicType:'',
					// 	topicId:item.forumId//主题id
					// },_this = this;
					// if(item.upvoteFlag == 0){
					// 	this.$cms.post(global.apiUrls.upvoteRecord, fdata).then(res => {
					// 		if (res.data.code == 1000) {
					// 			// _this.commentFx(_this.forumId, _this.pageCurrent, _this.pageSize)
					// 		}
					// 	})
					// }else if(item.upvoteFlag == 1){
					// 	this.$cms.delete(global.apiUrls.upvoteRecord, fdata).then(res => {
					// 		if (res.data.code == 1000) {
					// 			// _this.commentFx(_this.forumId, _this.pageCurrent, _this.pageSize)
					// 		}
					// 	})
					// }
				}
				
				
			},
			collectTap(item,index,type){
				this.$emit('collectTap',{
					item:item,
					index:index,
					type:type
				})
			}
		}
	}
</script>

<style lang="scss">
	.waterfallFlex{
		display: flex;
		// justify-content: space-between;
		flex-direction:column;
		flex-wrap: wrap;
		// justify-content:center; 
		// justyfy-content:space-btween;
		// justify-content:center; align-items:center; 
		// align-items:flex-end;
		// align-items:flex-start;
	}
	// 瀑布流
	
	.u-waterfall {
	
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
	
		flex-direction: row;
		-webkit-box-align: start;
		-webkit-align-items: flex-start;
		align-items: flex-start;
	}
	
	.u-column {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
	
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		-webkit-flex-direction: column;
		flex-direction: column;
		height: auto;
	}
	.demo-warter {
		width: 47%;
		max-height: 580upx;
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
		.draft{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 99;
			background: rgba(0,0,0,0.5);
			border-radius: 16rpx;
		}
		.draftImage{
			position: absolute;
			z-index: 999;
			top:50%;
			left: 50%;
			transform: translate(-50%,-50%);
			background-size: 100% 100%;
			color: #fff;
			image{
				display: block;
				margin: 0 auto;
			}
		}
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-img-wrap {}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
		word-break: break-all;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #ffffff;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}

	.pullbl {
		width: 730upx;
		margin: 14upx auto 0;

		.pbllimagr {

			font-size: 24upx;
			font-weight: 400;
			color: #999999;
			line-height: 33upx;
		}

		.pbllimag {

			font-size: 24upx;
			font-weight: 400;
			color: #999999;
			line-height: 33upx;
		}
	}

	.lad-image {
		width: 32upx;
		height: 32upx;
		display: block;
		float: left;
		margin-right: 10upx;
	}
	.noDataicon {
		width: 213upx;
		height: 209upx;
		background: url(https://bsyjk-pic.bsyjk.cn/empty/EFF804A9156249AD920DEF9CC805EFC7.png)no-repeat;
		background-size: 213upx 209upx;
		margin: 400upx auto 30upx;
	}
</style>
